React useFormStatus Async Validation: Asynchrone Formularstatus-Updates

In der modernen Webentwicklung sind Formulare ein entscheidendes Element für die Benutzerinteraktion. Die Sicherstellung der Datengültigkeit und die Bereitstellung von Echtzeit-Feedback sind für eine positive Benutzererfahrung von größter Bedeutung. Der useFormStatus-Hook von React, eingeführt in React 18, bietet eine leistungsstarke und elegante Möglichkeit, den Status von Formularübermittlungen zu verwalten, insbesondere bei asynchroner Validierung. Dieser Artikel befasst sich mit den Feinheiten von useFormStatus, konzentriert sich auf asynchrone Validierungsszenarien, bietet praktische Beispiele und beschreibt Best Practices zur Erstellung robuster und benutzerfreundlicher Formulare.

Die Grundlagen von useFormStatus verstehen

Der useFormStatus-Hook liefert Informationen über die letzte Formularübermittlung, die einen oder innerhalb eines <form> ausgelöst hat. Er gibt ein Objekt mit den folgenden Eigenschaften zurück:

• pending: Ein boolescher Wert, der angibt, ob die Formularübermittlung gerade aussteht.
• data: Die mit der Formularübermittlung verbundenen Daten, falls verfügbar.
• method: Die für die Formularübermittlung verwendete HTTP-Methode (z. B. 'get' oder 'post').
• action: Die Funktion, die als Aktion des Formulars verwendet wird.

Obwohl scheinbar einfach, wird useFormStatus unglaublich wertvoll, wenn es um asynchrone Operationen geht, wie die Validierung von Benutzereingaben gegen einen Remote-Server oder die Durchführung komplexer Datentransformationen vor der Übermittlung.

Die Notwendigkeit der asynchronen Validierung

Die traditionelle synchrone Validierung, bei der Prüfungen sofort im Browser durchgeführt werden, ist für reale Anwendungen oft unzureichend. Betrachten Sie diese Szenarien:

• Verfügbarkeit des Benutzernamens: Die Überprüfung, ob ein Benutzername bereits vergeben ist, erfordert eine Datenbankabfrage.
• E-Mail-Verifizierung: Das Senden einer Bestätigungs-E-Mail und die Überprüfung ihrer Gültigkeit erfordert eine serverseitige Interaktion.
• Zahlungsabwicklung: Die Validierung von Kreditkartendaten beinhaltet die Kommunikation mit einem Zahlungs-Gateway.
• Adress-Autovervollständigung: Das Vorschlagen von Adressoptionen während der Eingabe durch den Benutzer erfordert den Aufruf einer externen API.

Diese Szenarien beinhalten von Natur aus asynchrone Operationen. useFormStatus ermöglicht es uns in Verbindung mit asynchronen Funktionen, diese Validierungen elegant zu handhaben und dem Benutzer sofortiges Feedback zu geben, ohne die Benutzeroberfläche zu blockieren.

Implementierung der asynchronen Validierung mit useFormStatus

Lassen Sie uns ein praktisches Beispiel für die asynchrone Validierung der Verfügbarkeit eines Benutzernamens untersuchen.

Beispiel: Asynchrone Validierung des Benutzernamens

Zuerst erstellen wir eine einfache React-Komponente mit einem Formular und einem Senden-Button.

            import React, { useState, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

function UsernameForm() {
  const [username, setUsername] = useState('');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData) {
    "use server";
    const username = formData.get('username');

    // Simulieren Sie einen API-Aufruf, um die Verfügbarkeit des Benutzernamens zu prüfen
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulieren der Netzwerklatenz

    const isAvailable = username !== 'taken'; // Mock-Verfügbarkeitsprüfung

    if (!isAvailable) {
      throw new Error('Username ist bereits vergeben.');
    }

    console.log('Benutzername ist verfügbar!');
    // Führen Sie hier die eigentliche Formularübermittlung durch
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor="username">Benutzername:</label>
      <input
        type="text"
        id="username"
        name="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Prüfe...' : 'Senden'}
      </button>
       <StatusComponent />
    </form>
  );
}

function StatusComponent() {
    const { pending, data, method, action } = useFormStatus();

    return (
        <p>
          {pending && "Wird gesendet..."}
          {data && <pre>{JSON.stringify(data)}</pre>}
        </p>
    )
}

export default UsernameForm;

            

              

Copy